<template>
	<div class="style-split-yd-card">
		<el-card shadow="never" :style="theme ? theme.cardStyle : {}">
			<template v-if="title" #header>
				<div class="yd-card-header yd-flex" style="width: 100%">
					<div class="yd-card-title">
						<span class="yd-circle"></span>
						<span>{{ title }}<slot name="extra-title"></slot></span>
					</div>
					<el-button
						v-if="enableDownload"
						icon="el-icon-download"
						style="float: right; margin-right: 16px; color: #ffffff"
						type="text"
						:loading="downloading"
						@click="$emit('downloadHandler')"
					>
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
						{{ downloadText }}
					</el-button>
					<el-button
						v-if="moreBtn"
						class="yd-card-title"
						style="float: right; margin-right: 16px; color: #ffffff"
						type="text"
						@click="$emit('moreBtnHandler')"
					>
						{{ moreBtn }}
					</el-button>
					<slot name="yd-card-btn"></slot>
				</div>
			</template>
			<slot></slot>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="YdCard">
import { computed } from 'vue';
interface propsType {
	theme?: anyObj;
	title?: string;
	enableDownload?: boolean;
	downloading?: boolean;
	moreBtn?: string;
}

const props = defineProps<propsType>();
const emit = defineEmits(['downloadHandler']);

const downloadText = computed(() => {
	if (props.downloading) {
		return '下载中';
	}
	return '';
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.style-split-yd-card {
	width: 100%;
	height: 100%;
	:deep(.el-card) {
		background-color: rgba(29, 39, 75, 0.31);
		border: unset;
		border-radius: 12px;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	:deep(.el-card__header) {
		// min-height: 30px;
		// border: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.icon-cls {
			width: 20px;
			height: 20px;
			color: #00ffff;
		}
	}
	:deep(.el-card__body) {
		flex: 1;
	}
	:deep(.icon-cls) {
		width: 20px;
		height: 20px;
		color: #00ffff;
	}

	.el-icon-download {
		background-size: 18px;
		color: #ffffff00;
		width: 18px;
		height: 18px;
	}
}

.yd-card-header {
	text-align: left;
	// background-color: #ffffff00;
	height: 30px;
	line-height: 30px;
	padding-left: 20px;
}
// 卡片组件的标题
.yd-card-title {
	color: #fff;
}
</style>
